<template>
  <div class="user-layout">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <el-menu
        :default-active="activeMenu"
        router
      >
        <el-menu-item index="/user/profile">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item index="/user/orders">
          <el-icon><List /></el-icon>
          <span>我的订单</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 内容区 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { User, List } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.user-layout {
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 200px;
  background: #fff;
  border-radius: 8px;
}

.content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}
</style> 